<template>
  <div class="menu-wrapper">
    <category-dialog ref="officeDialog" @confirm="dialogConfirm" />
    <el-form ref="memberForm" :model="form" :rules="rules" label-width="80px">
      <div
        style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px"
      >
        <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">编辑员工信息</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="手机号码" prop="mobile">
            <el-input v-model="form.mobile" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="用户名称" prop="name">
            <el-input v-model="form.name" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="会员" prop="vip">
            <el-select v-model="form.vip" placeholder="请选择">
              <el-option
                v-for="item in vipOptions"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" :loading="clicked" @click="updateEmployee('memberForm')">完 成</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style scoped>
.menu-wrapper {
  margin: 15px;
}
</style>
<script>
import { EventBus } from "@/api/eventBus";
import utils from "../../utils/utils.js";
import Distpicker from "@/components/Distpicker/Distpicker";
import { updateCompanyMember, find } from "@/api/companyEmployee";
import { checkUserExists } from "@/api/sysUser";
import md5 from "js-md5";
import CategoryDialog from "@/components/CategoryDialog";
import loadMore from "@/utils/loadMore.js";

export default {
  name: "company-add",
  filters: {},
  components: {
    Distpicker,
    CategoryDialog,
    loadMore
  },
  data() {
    return {
      clicked: false, // 按钮防双击
      district: { province: 440000, city: "广州市", area: "海珠区" },
      form: {
        name: "",
        mobile: "",
        vip: "",
      },
      topName: "",
      dateName: "出生日期",
      genderOptions: [
        { label: "男", value: 1 },
        { label: "女", value: 2 }
      ],
      vipOptions: [
        { label: "VIP0", value: 0 },
        { label: "VIP1", value: 1 },
        { label: "VIP2", value: 2 },
        { label: "VIP3", value: 3 },
        { label: "VIP4", value: 4 },
        { label: "VIP5", value: 5 }
      ],
      rules: {
        name: [
          { required: true, message: "请输入员工名称", trigger: "blur" }
        ],
        mobile: [
          { required: true, message: "请输入联系电话", trigger: "blur" }
        ],
        vip: [
          { required: true, message: "请选择vip等级", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    var _this = this;
    _this.form.memberId = this.$route.query.memberId;
    _this.form.id = this.$route.query.id;
    _this.form.companyId = this.$route.query.companyId;
    find(this.$route.query.memberId)
      .then(response => {
        console.log("请求返回的数据" + JSON.stringify(response));
        if (response.type == "success") {
          _this.form.name = response.data.companyEmployeeVo.name;
          _this.form.mobile = response.data.companyEmployeeVo.mobile;
          _this.form.vip = _this.watchVip(response.data.companyEmployeeVo.vip);
          _this.form.status = response.data.companyEmployeeVo.status
          _this.form.job = response.data.companyEmployeeVo.job
        } else {
          _this.$message({
            message: response.content,
            offset: 120,
            center: true
          });
        }
      })
      .catch(error => {});
  },
  mounted() {},
  methods: {
    watchVip(val) {
      if (val == 0) {
        return "vip0";
      } else if (val == 1) {
        return "vip1";
      } else if (val == 2) {
        return "vip2";
      } else if (val == 3) {
        return "vip3";
      } else if (val == 4) {
        return "vip4";
      } else if (val == 5) {
        return "vip5";
      }
    },

    onSelected(val) {
      if (!utils.isNull(val.area) && !utils.isNull(val.area.code)) {
        this.form.areaId = val.area.code;
        this.form.areaName = val.area.value;
      }
    },
    dialogShow() {
      console.log("点击了");
      this.$refs.officeDialog.show();
    },
    dialogConfirm(val) {
      console.log(val);
      this.topName = val.name;
      this.form.memberCategoryId = val.id;
    },
    updateEmployee(form) {
      const _this = this;
      this.$refs[form].validate(valid => {
        if (valid) {
          // 校验表单
          _this.clicked = true;
          let sendData ={}
          sendData.name = _this.form.name,
              sendData.mobile = _this.form.mobile,
              sendData.vip = _this.form.vip.substr(_this.form.vip.length-1,1),
              sendData.memberId = _this.form.memberId,
              sendData.id = _this.form.id,
              sendData.companyId = _this.form.companyId,

          console.log("修改成功后的表单数据--" + JSON.stringify(sendData));
          updateCompanyMember(sendData)
            .then(response => {
              console.log(
                "修改成功后服务器返回的数据--" + JSON.stringify(response)
              );
              _this.clicked = false;
              if (response.type == "success") {
                EventBus.$emit("employee-edit", response.data);
                _this.$store
                  .dispatch("tagsView/delView", _this.$route)
                  .then(({ visitedViews }) => {
                    _this.$router.push({
                      path: "/company/employeeList"
                    });
                  }); // 关闭当前tab回到列表
              } else {
                _this.$message({
                  message: response.content,
                  offset: 120,
                  center: true
                });
              }
            })
            .catch(error => {
              _this.clicked = false;
            });
        } else {
          return false;
        }
      });
    },
  }
};
</script>
